<template>
	<div class="goods-box">
		<div class="goods-item">
			<div class="goods-images">
				<!-- <img class="goods-img " v-lazy="item.itemImg" /> -->
				<img class="goods-img " v-lazy="item.itemImg" />
			</div>
			<div class="goods-content">
				<h2 class="goods-name van-multi-ellipsis--l2">
					<svg-icon icon-name="tb" v-if="item.source == 0"></svg-icon>
					<svg-icon icon-name="jd" v-if="item.source == 1"></svg-icon>
					{{ item.itemTitle }}
				</h2>
				<div class="goods-price">
					<div class="deal">
						<span>支付：¥{{ item.orderAmount ? item.orderAmount : 0 | Fixed(2) }}</span>
					</div>
					<i class="line"></i>
					<div class="original">
						<span>数量：{{ item.itemNum || 1 }}</span>
					</div>
				</div>
				<div class="goods-price goods-order-tiem">
					<div class="deal">
						<span>下单时间：{{ item.orderCreateTime | dateFormatLine }}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="goods-state">
			<div class="goods-state-price" v-if="item.status == 1">已入账¥{{ item.orderCommission }}</div>
			<div class="goods-state-price" v-if="item.status == 0">入账中¥{{ item.orderCommission }}</div>
			<div class="goods-state-price" v-if="item.status == 2 && item.orderStatus == 13">
				已失效
			</div>
			<!-- <div class="goods-state-detail">
				<span>订单详情</span>
				<van-icon class="icon" size="16px" name="arrow" />
			</div> -->
			<div class="amount-status" v-if="item.status === 1 || item.checkTime">
				<p v-if="item.status === 1">已结算到余额</p>
				<p v-else-if="item.checkTime">确认收货{{ item.checkTime | dateFormat }}天后结算到余额</p>
			</div>

			<div class="detail-btn" v-if="item.source == 1" @click="toDetail">
				查看订单详情
				<i class="iconfont icon-xiayiye"></i>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
export default {
	name: 'GoodsItem',
	components: {},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			state: 1
		};
	},
	created() {},
	methods: {
		toDetail() {
			const { tradeId, source } = this.item;
			if (source == 1) {
				// this.$router.push({
				// 	path: '/jd/h5',
				// 	query: {
				// 		url: ''
				// 	}
				// });
				location.href = `https://wqs.jd.com/order/n_detail_v2.shtml?deal_id=${tradeId}`;
			}
		}
	},
	filters: {
		dateFormat(val) {
			return moment(val).format('DD');
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-box {
	background: #ffffff;
	border-radius: 16px;
	padding: 16px;
	margin: 20px auto 0 auto;
	width: 722px;
}
.goods-item {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.goods-images {
		width: 198px;
		height: 198px;
		display: flex;
		justify-content: center;
		align-items: center;
		img {
			max-width: 100%;
			max-height: 100%;
		}
	}
	.goods-content {
		width: 476px;
		height: 198px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.goods-name {
			/* prettier-ignore */
			font-size: 14PX;
			color: #000000;
			font-weight: 400;
		}
		.goods-price {
			color: #717076;
			/* prettier-ignore */
			font-size: 12PX;
			display: flex;
			align-items: center;
			.line {
				width: 1px;
				height: 30px;
				background: $text-grey-default;
				margin: 0 20px;
			}
			.original {
				p {
					margin-top: 8px;
				}
			}
		}
	}
}
.goods-state {
	display: flex;
	align-items: center;
	font-size: 14px;
	padding: 10px 0;
	margin-top: 20px;
	border-top: 4px solid #e8e8e8;
	.goods-state-price {
		color: #6a6363;
		flex: 1;
		font-size: 28px;
	}
	.goods-state-detail {
		color: #717076;
		display: flex;
		align-items: center;
		.icon {
			position: relative;
			top: -1.5px;
		}
	}
	.amount-status {
		color: #717076;
	}

	.detail-btn {
		color: #717076;
		font-size: 24px;

		&:active {
			background-color: #f70114;
			color: #fff;
		}
	}

	.icon {
		margin-left: 10px;
		.svg-icon {
			height: 40px;
			width: 40px;
		}
	}
}
</style>
